<template>
  <vab-card>
    <template #header>
      <div class="flex_sb">
        <div class="flex">
          <span class="leve2_title" style="margin-right: 20px">卖方出库</span>
        </div>
        <!-- <div class="flex_just_end" v-show="orderStatus != 3">
          <VabAuthButton
            title="下载"
            type="primary"
            @click="handleClick('download')"
          />
        </div> -->
      </div>
    </template>
    <template #default>
      <div class="flex" v-if="detailInfo">
        <div class="box_count">
          采购数量合计（个）：
          <span>{{ NumberFormat(detailInfo.sale_all, 0) || 0 }}</span>
        </div>
        <div class="box_count">
          采购金额合计（￥）：
          <span>{{ MoneyFormat(detailInfo.amount_all, 2) || '0.00' }}</span>
        </div>
        <div class="box_count">
          实发数量：
          <span>{{ NumberFormat(detailInfo.actual_qty, 0) || 0 }}</span>
        </div>
        <div class="box_count" v-for="(item, i) in orgInfo" :key="i">
          {{ item.org_name }}：
          <span>
            {{ item.count || 0 }}个-￥{{
              MoneyFormat(item.amount, 2) || '0.00'
            }}
          </span>
        </div>
      </div>
      <el-table
        border
        max-height="220"
        style="width: 100%"
        :data="data.dataSource"
        v-loading="data.loading"
      >
        <el-table-column label="序号" align="center" width="60">
          <template #default="scope">
            <span class="ellipsis" v-text="scope.$index + 1"></span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, i) in data.cloums"
          :key="i"
          :width="item.width"
          :prop="item.prop"
          :label="item.label"
          :align="
            item.type == 'money' || item.type == 'number' ? 'right' : 'center'
          "
        >
          <template #header>
            <span class="text_center">{{ item.label }}</span>
          </template>
          <template #default="{ row }">
            <!-- 自定义 -->
            <div v-if="item.type == 'custom'">
              <span class="ellipsis" v-if="item.prop == 'shipping_address'">
                {{ row.shipping_address || '' }} {{ row.address || '' }}
              </span>
            </div>
            <!-- 正常 -->
            <div v-else class="ellipsis">
              {{ FieldFormat(row[item.prop], item.type) }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </vab-card>
</template>

<script setup lang="ts">
  /**
   * 卖方出库
   */
  defineOptions({
    name: 'OrderTrackQuote',
  })
  import { customerOrderUpdateStatus } from '~/src/api/dms/customerOrder'
  import { FieldFormat, MoneyFormat, NumberFormat } from '~/src/utils/utils'
  import { quoteOutCloums } from '../tools'

  const props = defineProps({
    orderStatus: {
      type: Number,
      default: 3,
    },
  })

  const proxy: any = getCurrentInstance()?.proxy
  const router = useRouter()

  const loading = ref(false)
  const detailInfo = ref<any>(null)
  const orgInfo = ref<any>(null)

  const data: any = reactive({
    loading: false,
    page: {
      pageNum: 1,
      pageSize: 10,
    },
    cloums: quoteOutCloums,
    dataSource: [],
  })

  /**
   *
   * @method
   */

  const emit = defineEmits(['refresh'])

  const handleClick = (type: any) => {
    if (type == 'confirm') {
      customerOrderUpdateStatus({
        order_no: detailInfo.value.order_no,
        order_status: '130',
      }).then((res) => {
        proxy.$Message('确认报价成功', 'success')
        router.go(-1)
      })
    }
    if (type == 'download') {
    }
  }

  // 获取更新数据
  const getUpdateData = ({ order_no, stock_out_info }: any) => {
    loading.value = true

    const { list, orgs, actual_qty, sale_all, amount_all } = stock_out_info
    detailInfo.value = { actual_qty, sale_all, order_no, amount_all }

    data.dataSource = list.map((item: any) => {
      return {
        ...item,
        outbound_str: '已出库',
      }
    })
    orgInfo.value = orgs || null

    loading.value = false
  }

  /**
   * @实例
   */
  defineExpose({
    getUpdateData,
  })
</script>
